import React, { Component } from 'react';
// 导入请求资源
import url from "../../../config/url";
import req from "../../../http/req";
// 导入强化函数
import CheckLogin from "../../../hoc/CheckLogin";
import { Breadcrumb,PageHeader, Button,Table, Tag, Space,Pagination} from 'antd';

const columns = [
  {
    title: '序号',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '用户名',
    dataIndex: 'username',
    key: 'username',
  },
  {
    title: '手机号',
    dataIndex: 'mobile',
    key: 'mobile',
  },
  {
    title: '邮箱',
    key: 'email',
    dataIndex: 'email',
    render:(text)=><a href={"10695138@qq.com"}>{text}</a>,
  },
  {
    title: '性别',
    dataIndex: 'gender',
    key: 'gender',
    render:(text) => {
      if(text === "1"){
        return <Tag color="blue">男</Tag>
      }
      if(text === "2"){
        return <Tag color="pink">女</Tag>
      }
      if(text === "3"){
        return <Tag color="black">保密</Tag>
      }
    }

  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    render:(text) => {
      if(text === "1"){
        return <Tag color="green">正常</Tag>
      }
      if(text === "2"){
        return <Tag color="red">禁用</Tag>
      }
      
    }

  },
  {
    title: 'Action',
    key: 'action',
    render: (record) => (
      <Space size="middle">
        <a>编辑 {record.name}</a>
        <a>删除</a>
      </Space>
    ),
  },
];

class Index extends Component {
  bread = JSON.parse(sessionStorage.getItem("bread"))
  state={
    page:1, // 默认的起始页
    total:0,
    pageSize:10
  }
  render() {
    let pathname = this.props.location.pathname
    let crumb = []
    this.bread.forEach(el => {
      if(pathname === el.auth_path){
        crumb = el.auth_bread.split(",")
      }
    })
    return (
      <>
        <Breadcrumb separator=">">
          {
            crumb.map(el => {
              return <Breadcrumb.Item key={el}>{el}</Breadcrumb.Item>
            })
          }
          
        </Breadcrumb>
        <PageHeader
          title="用户列表"
          extra={[
            <Button key="1" type="primary">
              用户添加
            </Button>,
          ]}
        >
        </PageHeader>
        <Table columns={columns} dataSource={this.state.data} rowKey={record => record.id}
        pagination={false}/>
        {/* 分页器 */}
        <div style={{textAlign:"center",marginTop:"25px"}}>
          <Pagination defaultCurrent={this.state.page} total={this.state.total} onChange={this.loadData} />
        </div>
      </>
    );
  }
  componentDidMount(){
    this.loadData(this.state.page)
  }
  // 加载数据
  loadData = (page)=>{
    req.get(url.GetUsers,{
      params: {page}
    }).then(res => {
      // 复制数据给data
      if (res.data.errNo === 0) {
        this.setState({data: res.data.paginate.data,
        total:res.data.paginate.total
        })
      }
    })
  }
}

export default CheckLogin(Index)
